// @ts-ignore

import './index.less';

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

import { Badge, TabBar } from 'antd-mobile';
import { EditFill, FireFill, TeamFill } from 'antd-mobile-icons';

export default function Index() {
  const navigate = useNavigate();
  const [activeKey, setActiveKey] = useState('earn');

  const setRouteActive = (value: string) => {
    navigate(value);
    setActiveKey(value);
  };
  const tabs = [
    {
      key: 'earn',
      title: 'Earn',
      icon: <FireFill />,
      badge: Badge.dot,
    },
    {
      key: 'friends',
      title: 'Friends',
      icon: <TeamFill />,
      badge: '5',
    },
    {
      key: 'quests',
      title: 'Quests',
      icon: <EditFill />,
      badge: '99+',
    },
  ];

  return (
    <div className="bottom">
      <TabBar activeKey={activeKey} onChange={(value) => setRouteActive(value)}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}
